<template>
    <div class="Zky_BackpackPopup" v-if="prop.hidden" @click.self="BackpackPopup">
        <div class="Zky_BackpackPopupBox">
            <div class="Zky_BackpackPopupBoxHeader FontSize_Title marginBottom2" v-if="titleHidden">
                获得新物品
            </div>
            <div class="Zky_BackpackPopupBoxContent  marginBottom2">
                <slot>我是一个物品弹窗</slot>
            </div>
            <div class="Zky_BackpackPopupBoxfonter FontSize_Title" v-if="FoorthHidden">
                点击任意空白处关闭页面
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
const prop = defineProps({
    hidden: {
        //控制弹窗显示
        type: Boolean,
    },
    title: {
        //头部文本
        type: String,
    },

    titleHidden: { //控制头部是否显示
        default: true,
        type: Boolean,
    },
    FoorthHidden: { //控制底部是否显示
        default: true,
        type: Boolean,
    }
})
const emit = defineEmits(["update:hidden"])
const BackpackPopup = () => {
    emit("update:hidden", false)
}

</script>

<style scoped lang="scss">
.Zky_BackpackPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    padding: 10px;
    box-sizing: border-box;

    .Zky_BackpackPopupBox {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .Zky_BackpackPopupBoxHeader,
        .Zky_BackpackPopupBoxfonter {
            text-align: center;
            background: linear-gradient(to top, red, #fff);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent
        }

        .Zky_BackpackPopupBoxContent {
            color: #000;
            background: #fff;
            padding: 10px;
            max-height: 80%;
            min-height: 20%;
            overflow: hidden;
            box-sizing: border-box;


        }
    }
}
</style>